<template>
	<view class="">
		<view v-show="isTouch" class="box" :style="'height:'+ screenHeight +'px !important;'" @tap="close">
			<image class="big" src="../../static/qidongyebeijin@2x.png"></image>
			<image class="small" src="../../static/picture_qidongye_logo@2x.png" mode=""></image>
			<text class="title">雨点金融</text>
			<text class="des">理财给你更多选择</text>
		</view>
		<view class="loading" v-show="!isTouch">
			<swiper :indicator-dots="true"  :duration="500"
				:style="'height:'+ swiperHeight +'px !important;'">
				<swiper-item>
					<view class="container" :style="'height:'+ screenHeight +'px !important;'">
						<image src="@/static/loading/picture_yingdaoye01@2x.png" mode=""></image>
						<view class="page1">透支透明 安心理财</view>
						<view class="page1-1">精准分析各项收益，小白变大神</view>
						<view class="skip" @tap="skip">跳过</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="container" :style="'height:'+ screenHeight +'px !important;'">
						<image src="@/static/loading/picture_yingdaoye02@2x.png" mode=""></image>
						<view class="page1">多重保障 维护资金</view>
						<view class="page1-1">多级安全保障体系，让您理财更放心</view>
						<view class="skip" @tap="skip">跳过</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="container" :style="'height:'+ screenHeight +'px !important;'">
						<image class="speImg" src="@/static/loading/picture_yingdaoye03@2x.png" mode=""></image>
						<view class="page1">雨点金融全新来袭</view>
						<view class="page1-1">全新体验，全民体验</view>
						<view class="skip" @tap="skip">跳过</view>
						<view class="button" @tap="skip">立即体验</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: '',
				isTouch: true,
			}
		},
		methods: {
			close() {
				this.isTouch = false
			},
			skip() {
				uni.switchTab({
					url: '../home/home',
				})
			},
		
		},
		computed: {
			swiperHeight() {
				return this.screenHeight * 0.95
			}
		},
		beforeCreate(){
				uni.request({
						url: 'http://pub.woniulab.com:8081//pub/site/wuhanfinance',
						success: (res) => {
							console.log('地址', res.data);
							// this.text = 'request success';
							const base = res.data.data.protocol + '://' + res.data.data.baseUrl + ":" + res.data.data.port
							console.log('base', base)
							// localStorage.setItem('baseUrl',base)
							uni.setStorageSync('baseUrl', base)
				
				
						}
					});
		},
		async onLoad() {
			
			uni.getSystemInfo({
						    success:  (res) =>{
								var rpx=(res.screenHeight * (750 / res.windowWidth))  //将px 转换rpx
								this.screenHeight =res.windowHeight
						    }
						});
			//定时3s关闭启动页
			setTimeout(() => {
				this.isTouch = false
			}, 3000);
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100%;
		height: 100%;
		position: relative;

		.big {
			width: 100%;
			height: 100%;
		}

		.small {
			height: 148rpx;
			width: 144rpx;
			position: absolute;
			bottom: 326rpx;
			left: 301rpx;
		}

		.title {
			color: #FFFFFF;
			font-size: 40rpx;
			position: absolute;
			bottom: 224rpx;
			left: 295rpx;
		}

		.des {
			color: #E0E0E0;
			font-size: 32rpx;
			position: absolute;
			bottom: 152rpx;
			left: 248rpx;
		}
	}

	.skip {
		position: fixed;
		top: 5%;
		right: 9%;
		width: 100rpx;
		height: 50rpx;
		border: 2rpx solid #323232;
		opacity: 0.59;
		border-radius: 18rpx;
		line-height: 47rpx;
		font-size: 25rpx;
		font-weight: 300;
		color: #323232;
		text-align: center;
	}

	.loading {
		swiper {
			width: 100%;

			swiper-item {
				.container {
					position: relative;
					text-align: center;
					width: 750rpx;
					height: 1336rpx;

					image {
						width: 750rpx;
						height: 1336rpx;
					}

					.speImg {
						width: 672rpx;
						height: 1196rpx;
						// position: absolute;
						margin-top: -80rpx;
					}

					.page1 {
						color: #2D2D2D;
						font-size: 40rpx;
						font-weight: 500;
						position: absolute;
						width: 100%;
						bottom: 27%;
						z-index: 10;
					}

					.page1-1 {
						color: #2D2D2D;
						font-size: 32rpx;
						font-weight: 300;
						position: absolute;
						width: 100%;
						bottom: 23%;
						z-index: 10;
					}

					.button {
						font-size: 32rpx;
						font-weight: 300;
						line-height: 80rpx;
						color: #FFFFFF;
						width: 352rpx;
						height: 80rpx;
						background: #3480EF;
						border-radius: 40rpx;
						position: absolute;
						left: 199rpx;
						bottom: 15%;
					}
				}
			}
		}
	}
</style>
